<template>
  <view class="Top-view">
    <view :style="{color:index==qnum?'red':''}" v-for="(item,index) in qList" :key="item._id" @click.stop="changeNav(index)">
        <text>{{item.query_val}} </text>
    </view>
  </view>
  <view style="height:100rpx"></view>
  <!-- 点击全部的筛选 -->
  <view class="mask-view" v-if="qnum==0&&selFlag"></view>
  <view class="con-view" v-if="qnum==0&&selFlag">
    <block  v-for="item in qList[0].filter_val" >
        <text @click.stop="toChange(item)">{{item}}</text>		 
    </block>
  </view>
  <!-- 列表 -->
  <view class="phy-exam-back" v-for="item in tiJianList" :key="item._id" 
  @click="toInfo(item._id)">
    <text class="phy-exam-type">{{item.title}}</text>
    <view class="phy-exam-flex">
        <image :src="item.image" mode="aspectFill"></image>
        <view>
            <text class="phy-exam-title">{{item.be_suit}}</text>
            <text class="phy-exam-label">{{item.describe}}</text>
        </view>
    </view>
    <view class="phy-exam-price">
        <text>已约{{item.sales}}</text>
        <text>￥{{item.price}}</text>
    </view>
  </view>
  <view style="height:300rpx"></view>
</template>

<script setup lang="ts">
  import {getPhyterm,getPhyList} from '@/api/user.js'
  import {ref,reactive} from 'vue'
  interface Iqlist{
	  filter_val:Array<string>,
	  query_val:string,
	  _id:string
  }
  let qList=ref<Array<Iqlist>|null>();
   let getQueryList=async ()=>{
	   let res=await getPhyterm();
	   console.log(res,"----------")
	   qList.value=res.data;
   }
		getQueryList();
	// 获取体检套餐
	let queryForm=reactive({
		type:"",//类型
		sales:"desc",//销量 desc  由高到低  asc 由低到高
		price:"desc"//价格  desc  由高到低  asc 由低到高
	})
		
		
		let qnum=ref(1);
			let selFlag=ref(false); //控制弹出层
		let changeNav=(index)=>{ //切换样式
				qnum.value=index;
				if(index==0){
					selFlag.value=!selFlag.value;
				}
				if(index==1){
					queryForm.sales=queryForm.sales=='desc'?'asc':'desc'
				}
				if(index==2){
					queryForm.price=queryForm.price=='desc'?'asc':'desc'
				}
				getList();
		}
		
		
		// 点击套餐类型的 分类
		let toChange=(item)=>{
			selFlag.value=false;
			console.log(item,"触发了")
			qList.value[0].query_val=item;
			queryForm.type=item;
			getList();
		}
		
	
	let tiJianList=ref([])
	let  getList=async ()=>{
			let res=await getPhyList(queryForm)
			console.log(res,"---------全部体检套餐------")
			tiJianList.value=res.data;
	} 
	getList();
	
	// 跳转体检详情
	let toInfo=(id)=>{
		uni.navigateTo({
			url:"/pages/tiJian/detail?id="+id
		})
	}
</script>

<style>
  page{
    background-color: #fafafa;
  }
  .Top-view{
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50rpx;
    height: 100rpx;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
  .Top-view view{
    display: flex;
    align-items: center;
  }
  .Top-view image{
    width: 20rpx;
    height: 20rpx;
    display: block;
    padding-left: 10rpx;
  }
  /* 筛选条件 */
  .mask-view{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100rpx;
    background-color: rgba(0,0,0,0.5);
  }
  .con-view{
    background-color: #ffffff;
    padding: 0 50rpx;
    position: fixed;
    top: 100rpx;
    left: 0;
    right: 0;
  }
  .con-view text{
    display: block;
    padding: 20rpx 0;
  }
  /* 体检套餐 */
  .phy-exam-back{
    background-color: #ffffff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 10rpx;
  }
  .phy-exam-type{
    font-size: 35rpx;
    font-weight: bold;
  }
  .phy-exam-flex image{
    width: 200rpx;
    height: 200rpx;
    display: block;
  }
  .phy-exam-flex{
    display: flex;
    justify-content: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f6f6f6;
  }
  .phy-exam-flex view{
    flex: 1;
    padding-left: 20rpx;
  }
  .phy-exam-flex text{
    display: block;
  }
  .phy-exam-title{
    font-weight: bold;
    padding-bottom: 20rpx;
  }
  .phy-exam-label{
    color: #5555;
  }
  .phy-exam-price{
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
    font-weight: bold;
    color: #ff5f2c;
  }
  </style>